﻿@{
    Layout = "~/Views/Shared/_FormGray.cshtml";
}

@section header{
    <link href="@Url.Content("~/lib/bootstrap.datepicker/1.9.0/css/bootstrap-datepicker.min.css")" rel="stylesheet" type="text/css">
    <script src='@Url.Content("~/lib/bootstrap.datepicker/1.9.0/js/bootstrap-datepicker.min.js")' type="text/javascript"></script>
    <script src='@Url.Content("~/lib/moment/moment-with-locales.min.js")' type="text/javascript"></script>
    <script src='@Url.Content("~/lib/moment/moment-timezone-with-data.min.js")' type="text/javascript"></script>
}

<style>

    .tabs-container {
        margin: 20px;
    }

    .nav-tabs > li > a {
        font-weight: normal;
    }

    .select2-selection--single.error {
        border: 1px dotted #cc5965;
    }

    .select2-selection--single.error {
        background-color: #fbe2e2;
        border-color: #c66161;
        color: #c00;
    }

</style>

<div class="tabs-container">
    <ul class="nav nav-tabs">
        <li class="active">
            <a data-toggle="tab" href="#tab-1" aria-expanded="true">Test OutBound Call</a>
        </li>
        <li class="">
            <a data-toggle="tab" href="#tab-2" aria-expanded="false">Test Upload Customer</a>
        </li>
    </ul>
    <div class="tab-content">
        <div id="tab-1" class="tab-pane active">
            <div class="panel-body">
                <div class="wrapper animated fadeInRight">
                    <form id="form" class="form-horizontal m">
                        <div class="form-group">
                            <label class="col-sm-3 control-label ">Environment:  </label>
                            <div class="col-sm-8">
                                <div id="outboundFlowId" col="outboundFlowId"></div>
                            </div>
                        </div>
                        <br />
                        <div class="form-group">
                            <label class="col-sm-3 control-label ">Phone Number</label>
                            <div class="col-sm-1">
                                <select name="telephonePrefix" id="telephonePrefix" class="form-control select2">
                                    <option value="+1">+1</option>
                                    <option value="+52">+52</option>
                                    <option value="+86">+86</option>
                                </select>
                            </div>
                            <div class="col-sm-7">
                                <input id="telephone" col="Telephone" type="text" class="form-control" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label ">Contact Name</label>
                            <div class="col-sm-8">
                                <input id="consumerName" col="ConsumerName" type="text" class="form-control" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label "> </label>
                            <div class="col-sm-8">
                                <button id="btnSend" class="btn btn-primary " type="button"><i class="fa fa-check"></i>&nbsp;Test</button>
                            </div>
                        </div>

                    </form>

                </div>
            </div>
        </div>
        <div id="tab-2" class="tab-pane">
            <div class="panel-body">
                <div class="wrapper">
                    <form id="formUploadCustomer" class="form-horizontal m">

                        <div class="form-group">
                            <label class="col-sm-3 control-label ">Environment:  </label>
                            <div class="col-sm-8">
                                <div id="outboundFlowIdUploadCustomer" col="outboundFlowIdUploadCustomer"></div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-3 control-label ">First Name</label>
                            <div class="col-sm-8">
                                <input id="firstName" col="FirstName" type="text" class="form-control" />
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-3 control-label ">Last Name</label>
                            <div class="col-sm-8">
                                <input id="lastName" col="LastName" type="text" class="form-control" />
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-3 control-label ">Landline</label>
                            <div class="col-sm-1">
                                <select name="landlinePrefix" id="landlinePrefix" class="form-control select2">
                                    <option value="+1">+1</option>
                                    <option value="+52">+52</option>
                                    <option value="+86">+86</option>
                                </select>
                            </div>
                            <div class="col-sm-7">
                                <input id="landline" col="Landline" type="text" class="form-control" />
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-3 control-label ">MobilePhone</label>
                            <div class="col-sm-1">
                                <select name="mobilePhonePrefix" id="mobilePhonePrefix" class="form-control select2">
                                    <option value="+1">+1</option>
                                    <option value="+52">+52</option>
                                    <option value="+86">+86</option>
                                </select>
                            </div>
                            <div class="col-sm-7">
                                <input id="mobilePhone" col="MobilePhone" type="text" class="form-control" />
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-3 control-label ">SMS Consent</label>
                            <div class="col-sm-8" style="padding-top: 7px">
                                <input id="enableSMS" col="EnableSMS" type="checkbox" />
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-3 control-label ">TimeZone</label>
                            <div class="col-sm-8">
                                <div id="timeZone" col="TimeZone">
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-3 control-label ">Email</label>
                            <div class="col-sm-8">
                                <input id="email" col="Email" type="text" class="form-control" />
                            </div>
                        </div>

                        @*<div class="form-group">
            <label class="col-sm-3 control-label ">Survey Start Date</label>
            <div class="col-sm-8">
                <input id="surveystartdate" col="SurveyStartDate" type="text" class="form-control" />
            </div>
        </div>*@

                        <div class="form-group">
                            <label class="col-sm-3 control-label ">Enrollment  Date</label>
                            <div class="col-sm-8">
                                <input id="enrolldate" col="EnrollDate" type="text" class="form-control" />
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-3 control-label ">Gender</label>
                            <div class="col-sm-8">
                                <select name="gender" id="gender" class="form-control select2">
                                    <option value="male">Male</option>
                                    <option value="female">Female</option>
                                </select>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-3 control-label ">Date of Birth</label>
                            <div class="col-sm-8">
                                <input id="dob" col="DOB" type="text" class="form-control" />
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-3 control-label ">Unique Key</label>
                            <div class="col-sm-8">
                                <input id="uniquekey" col="uniqueKey" type="text" class="form-control" />
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-3 control-label ">Test Mode</label>
                            <div class="col-sm-8">
                                <input type="radio" name="mode" value="1" checked="checked" />
                                <label for="immediately">Start immediately</label><br>
                                <input type="radio" name="mode" value="0" />
                                <label for="journey">Run through Journey</label><br>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-3 control-label ">Bot Voice Mode</label>
                            <div class="col-sm-8">
                                <input type="radio" name="voice_mode" value="1" checked="checked" />
                                <label for="audo">Built-in Voice</label><br>
                                <input type="radio" name="voice_mode" value="0" />
                                <label for="native">Wellsaidlabs</label><br>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-3 control-label "> </label>
                            <div class="col-sm-8">
                                <button id="btnUploadCustomer" class="btn btn-primary " type="button"><i class="fa fa-check"></i>&nbsp;Test</button>
                            </div>
                        </div>

                    </form>

                </div>
            </div>
        </div>
    </div>


</div>

<div class="row" style="margin: 0">
    <div class="col-md-6">
        
    </div>
    <div class="col-sm-6">
    </div>
</div>

<script type="text/javascript">
    var id = ys.request("id");
    $(function () {
        //getForm();
      //getForm();
        $("#outboundFlowId").ysComboBox({
            url: '@Url.Content("~/BusinessManage/OutboundFlow/GetListJson?Project=HealthRiskAssessments")',
            key: "Id",
            value: "Environment",
            class: "form-control",
            multiple: false
          });

        jQuery.validator.addMethod("environment_combobox_required", function (value, element) {
            var select = $("#select2-" + element.id + "-container");
            var text = select.text();

            return (text != "Please select");
        }, "* Please select an environment");

        $('#form').validate({
            rules: {
                outboundFlowId_select: { environment_combobox_required: true },
                telephone: { required: true },
                consumerName: { required: true},
                telephonePrefix: { required: true },
                dateOfBirth: { required: true },
            },
            highlight: function (element, errorClass, validClass) {
                if ($("#" + element.id).is("select")) {
                    var outboundFlowIdUploadCustomer = $("#" + element.id.replace('_select', ''));
                    var select = outboundFlowIdUploadCustomer.find(".select2-selection--single");
                    select.addClass("error");
                } else {
                    $("#" + element.id).addClass("error");
                }
            },
            unhighlight: function (element, errorClass, validClass) {
                if ($("#" + element.id).is("select")) {
                    var outboundFlowIdUploadCustomer = $("#" + element.id.replace('_select', ''));
                    var select = outboundFlowIdUploadCustomer.find(".select2-selection--single");
                    select.removeClass("error");
                } else {
                    $("#" + element.id).removeClass("error");
                }
            }
        });
        $("#btnSend").click(saveForm);

        //laydate.render({ elem: '#dateOfBirth', format: 'MM/dd/yyyy', value: new Date(-765187200000), lang: 'en' });

        $("#outboundFlowIdUploadCustomer").ysComboBox({
            url: '@Url.Content("~/BusinessManage/OutboundFlow/GetListJson?ProjectEnvironment=HealthRiskAssessments|PROD")',
            key: "Id",
            value: "Environment",
            class: "form-control",
            multiple: false
        });

        //$('#surveystartdate').datepicker({
        //    autoclose: true,
        //    todayHighlight: true
        //});

        //$('#surveystartdate').datepicker('update', new Date());

        $('#enrolldate').datepicker({
            autoclose: true,
            todayHighlight: true
        });

        var yest = new Date(new Date().getTime() - 24 * 60 * 60 * 1000);
        var month = yest.getMonth();
        var year = yest.getFullYear();
        var date = yest.getDate();
        var yesterday = new Date(year, month, date);

        $('#enrolldate').datepicker('update', yesterday);

        $('#dob').datepicker({
            setDate: new Date(),
            autoclose: true
        });

        $('#dob').datepicker('update', new Date('10/03/1945'));

        var timeZonesList = Object.keys(moment.tz._zones)
            .map(function (k) { return moment.tz._zones[k].split('|')[0]; })
            .filter(function (z) { return z.indexOf('/') >= 0; })
            .sort();

        var timezoneData = [];

        for (let i = 0; i < timeZonesList.length; i++) {

            if (!timeZonesList[i].toLowerCase().includes("etc") && (timeZonesList[i].toLowerCase().includes("shanghai") || timeZonesList[i].toLowerCase().includes("america"))) {

                var timezone = {
                    'Key': timeZonesList[i],
                    'Value': timeZonesList[i]
                }

                timezoneData.push(timezone);

            }

        }

        $("#timeZone").ysComboBox({
            data: timezoneData,
            class: "form-control",
            multiple: false
        });

        $('#formUploadCustomer').validate({
            rules: {
                outboundFlowIdUploadCustomer_select: { environment_combobox_required: true },
                firstName: { required: true },
                lastName: { required: true },
                //email: { required: true },
                //surveystartdate: { required: true },
                enrolldate: { required: true },
                gender: { required: true },
                dob: { required: true }
            },
            highlight: function (element, errorClass, validClass) {
                if ($("#" + element.id).is("select")) {
                    var outboundFlowIdUploadCustomer = $("#" + element.id.replace('_select',''));
                    var select = outboundFlowIdUploadCustomer.find(".select2-selection--single");
                    select.addClass("error");
                } else {
                    $("#" + element.id).addClass("error");
                }
            },
            unhighlight: function (element, errorClass, validClass) {
                if ($("#" + element.id).is("select")) {
                    var outboundFlowIdUploadCustomer = $("#" + element.id.replace('_select', ''));
                    var select = outboundFlowIdUploadCustomer.find(".select2-selection--single");
                    select.removeClass("error");
                } else {
                    $("#" + element.id).removeClass("error");
                }
            }
        });

        $("#btnUploadCustomer").click(saveFormUploadCustomer);

    });

    function getForm() {
        if (id > 0) {
            ys.ajax({
                url: '@Url.Content("~/BusinessManage/PhoneNumber/GetFormJson")' + '?id=' + id,
                type: 'get',
                success: function (obj) {
                    if (obj.Tag == 1) {
                        $('#form').setWebControls(obj.Data);
                    }
                }
            });
        }
        else {
            var defaultData = {};
            $('#form').setWebControls(defaultData);
        }
    }

    function saveForm(index) {

        if ($('#form').validate().form()) {
            var postData = $('#form').getWebControls({ Id: id });
            postData.telephonePrefix = $("#telephonePrefix").select2("val");

            ys.ajax({
                url: '@Url.Content("~/BusinessManage/PhoneNumber/SendOutboundCall")',
                type: 'post',
                data: postData,
                success: function (obj) {
                    if (obj.Tag == 1) {
                        ys.msgSuccess(obj.Message);
                        //parent.searchGrid();
                        //parent.layer.close(index);
                    }
                    else {
                        ys.msgError(obj.Message);
                    }
                }
            });
        }
    }

    function saveFormUploadCustomer(index) {

        var selected_mode = $('input[name=mode]:checked').val();
        var selected_voice_mode = $('input[name=voice_mode]:checked').val();

        if (selected_mode == undefined) {
            alert('please select a Test Mode');
            return;
        }

        if (selected_voice_mode == undefined) {
            alert('please select a Bot Voice Mode');
            return;
        }

        if ($('#formUploadCustomer').validate().form()) {
            var postData = $('#formUploadCustomer').getWebControls({ Id: id });

            postData.LandlinePrefix = $("#landlinePrefix").select2("val");
            postData.MobilePhonePrefix = $("#mobilePhonePrefix").select2("val");
            postData.Gender = $("#gender").select2("val");

            if ($('#enableSMS').prop('checked')) {
                postData.EnableSMS = true;
            } else {
                postData.EnableSMS = false;
            }
            postData.TestMode = selected_mode;
            postData.VoiceMode = selected_voice_mode;

            ys.ajax({
                url: '@Url.Content("~/BusinessManage/PhoneNumber/UploadHRACustomers")',
                type: 'post',
                data: postData,
                success: function (obj) {
                    if (obj.Tag == 1) {
                        ys.msgSuccess(obj.Message);
                        //parent.searchGrid();
                        //parent.layer.close(index);
                    }
                    else {
                        ys.msgError(obj.Message);
                    }
                }
            });
        }
    }
</script>

